<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>华胜后台管理</title>
    <link rel="stylesheet" type="text/css" href="css/unified.css">
    <script src="plugins/layui/layui.js"></script>

    <style type="text/css">
        .searchform span{margin-left: 10px}
        .layui-table-view .layui-table td, .layui-table-view .layui-table th{padding: 0}
        .layui-form-switch{width: 52px !important;}
        .layui-form-switch em{width: 37px;}
        .layui-form-onswitch i{left: 42px;}
        
        .layui-col-md6{padding: 0 10px;}
    </style>
</head>
<body>
    <div class="breadcrumbnav">
        <span class="layui-breadcrumb " lay-separator="·">
          <a ><cite>首页</cite></a>
          <a ><cite>委托加工单据处理</cite></a>
          <a ><cite>委托加工材料出库</cite></a>
        </span>
    </div>
    <div class="kit-doc">
        <!-- 标题 -->
        
        <div class="kit-doc-title">
            <fieldset>
                <legend> <a name="blockquote">出库</a>
                </legend>
            </fieldset>
        </div>
        <!-- 标题 end-->
        
        
        <!-- 概述 -->

		
		<div class="boderbox">
       		<div class="rowtop">
	            <button class="layui-btn addbtn openwinbtn" data-method="addmang">添加+</button>
            </div>
		
	        <div class="layui-tab-content notab">
	            <div class="layui-tab-item layui-show">
	                <table class="layui-table " lay-filter="table100" id="EEtable"></table>
	            </div>
	        </div>
	    </div>

        <script id="addBox" type="text/html">
			<div class=" layui-layer-wrap">
                <form class="layui-form layui-form-pane" action="" id="addform" >
                    
                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                    	 <div class="layui-form-item">
						    <label class="layui-form-label">委托单号</label>
						    <div class="layui-input-block">
						      <input type="number" name="entrustNumber" autocomplete="off"   placeholder="" class="layui-input">
						    </div>
						  </div>
                    </div>
                   	<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                    <div class="layui-form-item">
					    <label class="layui-form-label">批次id</label>
					    <div class="layui-input-block">
					      <input type="number" name="batchId" autocomplete="off"   placeholder="" class="layui-input">
					    </div>
					</div>
					</div>
                   	<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                    <div class="layui-form-item">
					    <label class="layui-form-label">出货点编码</label>
					    <div class="layui-input-block">
					      <input type="number" name="fromLocationId" autocomplete="off"   placeholder="" class="layui-input">
					    </div>
					</div>
					</div>
                   	<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
					<div class="layui-form-item">
					    <label class="layui-form-label">出库点编码</label>
					    <div class="layui-input-block">
					      <input type="number" name="toLocationId" autocomplete="off"    placeholder="" class="layui-input">
					      
					    </div>
					</div>
					</div>
                   	<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
					<div class="layui-form-item">
					    <label class="layui-form-label">产品数量</label>
					    <div class="layui-input-block">
					      <input type="number" name="theNum" autocomplete="off"  placeholder=""   class="layui-input">
					    </div>
					</div>
					</div>
                   	<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
					<div class="layui-form-item">
					    <label class="layui-form-label">批次</label>
					    <div class="layui-input-block">
					      <input type="number" name="inBatchId" autocomplete="off"    placeholder="" class="layui-input">
					    </div>
					</div>
					</div>
                   	<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
					<div class="layui-form-item">
					    <label class="layui-form-label">出货订单号</label>
					    <div class="layui-input-block">
					      <input type="number" name="orderNumber" autocomplete="off"    placeholder="" class="layui-input">
					    </div>
					</div>
					</div>
                   	<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
					<div class="layui-form-item">
					    <label class="layui-form-label">备注</label>
					    <div class="layui-input-block">
					      <input type="text" name="comment" autocomplete="off"    placeholder="" class="layui-input">
					    </div>
					</div>
					</div>
                   	<!--<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                    <div class="layui-form-item">
                          <label class="layui-form-label">创建id</label>
                          <div class="layui-input-block">
                            <input type="number" name="createId"   autocomplete="off" class="layui-input" placeholder="" >
                          </div>
                    </div>
                    </div>-->
                   	<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                    <div class="layui-form-item">
                          <label class="layui-form-label">产品条码</label>
                          <div class="layui-input-block">
                            <input type="number" name="barCode"   autocomplete="off" class="layui-input" placeholder="" >
                          </div>
                    </div>
                    </div>
                   	<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                    <div class="layui-form-item">
                          <label class="layui-form-label">出货时间</label>
                          <div class="layui-input-block">
                            <input type="text" name="createTime" id="createTime" lay-verify="date" autocomplete="off" class="layui-input" placeholder="yyyy-MM-dd HH:mm"  >
                          </div>
                    </div>
                    </div>
                   	<!--<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                    <div class="layui-form-item">
                          <label class="layui-form-label">入库时间</label>
                          <div class="layui-input-block">
                            <input type="text" name="createTime" lay-verify="number" autocomplete="off" class="layui-input" placeholder="" >
                          </div>
                    </div>
                    </div>-->
                   	<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                    <div class="layui-form-item">
                          <label class="layui-form-label">商品编码</label>
                          <div class="layui-input-block">
                            <input type="text" name="merchantNumber"  autocomplete="off" class="layui-input" placeholder="" >
                          </div>
                    </div>
                    </div>
                   	<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                    <div class="layui-form-item" pane="">
                          <label class="layui-form-label">状态</label>
                          <div class="layui-input-block">
                          	<input type="checkbox" checked="" lay-text="成功|失败" value="1"  name="state" lay-skin="switch" lay-filter="switchTest" title="开关">
                           
                          </div>
                    </div>
                    </div>
                   	<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                    <div class="layui-form-item">
                          <label class="layui-form-label">备注</label>
                          <div class="layui-input-block">
                            <input type="text" name="remarks"   autocomplete="off" class="layui-input" placeholder="" >
                          </div>
                    </div>
                    </div>
                </form>
            </div>
		</script><!--addBox结束-->
		
		<script type="text/html" id="checkboxTpl">
			<!--是否成功的状态开关按钮-->
			<input type="checkbox" name="lock" value="{{d.id}}" title="" lay-filter="lockDemo" {{ d.state==1 ? 'checked' : '' }} disabled>
		</script>
            <script src="js/jquery-3.2.1.min.js"></script>
			<script type="text/javascript" src="js/allajax.js"></script>
            <script>

            layui.use(['layer', 'form', 'element','table','laydate','laypage'], function(){
              var layer = layui.layer
              ,form = layui.form
              ,element = layui.element
              ,table = layui.table
              ,laydate = layui.laydate
              ,laypage = layui.laypage;
              
				var tableArray = new Array();
				EEListFn(1 ,100 );
				function EEListFn(curr ,limit ){
					AjaxPostFn('system/material/out/select?page='+curr+'&pagesize='+limit, "{}", function(jsonData) {
						$.each(jsonData.pageInfo.list, function(i, obj) {
							tableArray.push({
								"id": obj.id,
								"operation": " <a class='layui-btn layui-bg-red ' lay-event='DelThis'>删除</a>",
								"entrustNumber": obj.entrustNumber,
								"batchId": obj.batchId,
								"fromLocationId": obj.fromLocationId,
								"toLocationId": obj.toLocationId,
								"theNum": obj.theNum,
								"inBatchId": obj.inBatchId,
								"orderNumber": obj.orderNumber,
								"comment": obj.comment,
								"createId": obj.createId,
								"barCode": obj.barCode,
								"createTime": getMyDate( obj.createTime ),
								"merchantNumber": obj.merchantNumber,
								"materialNumber": obj.materialNumber,
								"state": obj.state,
								"remarks": obj.remarks
							});
						})
						
						//展示已知数据
						table.render({
							elem: '#EEtable',
							cols: [
								[ //标题栏
									
									{field: 'id', minWidth: '0%', width: '0%',type: 'space',style: 'display:none' },
									{field: 'operation',width: 100,title: '操作'},
									{field: 'entrustNumber',width: 100,title: '委托单号', edit: 'text'},
									{field: 'batchId',width: 100,title: '批次id'},
									{field: 'fromLocationId',width: 100,title: '出货点编码'},
									{field: 'toLocationId',width: 100,title: '出库点编码'},
									{field: 'theNum',width: 100,title: '产品数量', edit: 'text'},
									{field: 'inBatchId',width: 100,title: '批次'},
									{field: 'orderNumber',width: 100,title: '出货订单号'},
									{field: 'comment',width: 100,title: '备注', edit: 'text'},
									{field: 'createId',width: 100,title: '创建id'},
									{field: 'barCode',width: 100,title: '产品条码', edit: 'text'},
									{field: 'createTime',width: 200,title: '出货时间'},
									{field: 'merchantNumber',width: 100,title: '商品编码'},
									{field: 'state',width: 100,title: '状态',templet: '#checkboxTpl',unresize: true}, //1成功0失败
									{field: 'remarks',width: 100,title: '备注'},
								]
							],
							data: tableArray,
							size: 'lg',
							even: true,
							page: true, //是否显示分页
							height:'full-250',
							done: function(){
//								 laypage.render({
//								    elem: 'layui-table-page1' //注意，这里的 test1 是 ID，不用加 # 号
//								    ,count: jsonData.pageInfo.total//数据总数，从服务端得到
//								    
//								    ,jump: function(obj, first){
//									    //obj包含了当前分页的所有参数，比如：
//									    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
//									    console.log(obj.limit); //得到每页显示的条数
//									   
//									    //首次不执行
//									    if(!first){
//									      //do something
//									      EEListFn(obj.curr,obj.limit);
//									    }
//									  }
//								  });
							}
						});//数据渲染结束

					})
					
				}//EEList结束
				
				//日期选择
//				laydate.render({
//				   elem: lay('.sTime') //指定元素
//				 });
//				
				table.on('tool(table100)', function(obj){ 
                  var data = obj.data; //获得当前行数据
                  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                  var tr = obj.tr; //获得当前行 tr 的DOM对象
                 
                  if(layEvent === 'DelThis'){ //删除
                  	layer.confirm('是否删除该条分类信息', function(index) {
						AjaxPostFn('system/material/out/delete', "{'id':'" + data.id + "'}", function(jsonData) {
							if(jsonData.htmlState.status == 200) {
								layer.msg("删除成功");

							} else {}
						})
						obj.del();
						layer.close(index);

					});
                		
                  }
              	})
				
				
				//监听单元格编辑
				 table.on('edit(table100)', function(obj){
				    var value = obj.value //得到修改后的值
				    ,data = obj.data //得到所在行所有键值
				    console.log(data)
				    ,field = obj.field; //得到字段
				    AjaxPostFn('system/material/out/update',JSON.stringify(data) , function(jsonData) {
				    	console.log(jsonData)
						if(jsonData.htmlState.status == 200) {
							layer.msg("修改成功");
							
						}
					})
//				    layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
				 });
				 
				 $('.openwinbtn').on('click', function() {
                    var othis = $(this),
                        method = othis.data('method');
                    active[method] ? active[method].call(this, othis) : '';
                });
				 
				 var active = {
//                 弹出框事件
                    addmang:function(){
                        layer.open({
                        	type:1,
                            skin: 'layui-layer-molv',
                            title: '新增委托加工材料出库',
                            area: ['800px', '580px'],
                            content: $("#addBox").html(),
                            skin: 'demo-class',
                            btn: ["确认新增", "关闭"],
                            yes: function(index, layero) {
                                //按钮1的回调
								 inputisNull("#addform input" ,function(){
								 	var thisdata = $("#addform").serializeJson();
								 	thisdata.createId = '123456';
								 	thisdata.createTime = new Date(thisdata.createTime).getTime() ; //需要重新处理日期格式
//	                                console.log(thisdata)
	                                 AjaxPostFn('system/material/out/insert',JSON.stringify(thisdata), function(jsonData) {
								    	
										if(jsonData.htmlState.status == 200) {
											layer.msg("增加成功");
											location.reload(); 
										}else{
											layer.msg(jsonData.htmlState.error);
										}
									})
								 })
                                
                               
                            },
                            btn2: function(index, layero) {
                                //按钮2的回调
                            },
                            cancel: function() {
                                //右上关闭的回调
                            },success:function(){
                                
                            	form.render();
                            	laydate.render({
								    elem: '#createTime'
								    ,type:'datetime'
								    ,format:'yyyy-MM-dd HH:mm'
								});
                            	
//                          	
                            }
                        })
                    }
                }

            });  

            </script>

    </div>
</body>
</html>